<template>
	<view>
		<u-keyboard default="" ref="uKeyboard" mode="number" :dot-enabled="false" v-model="isshow" :safe-area-inset-bottom="true"
		 :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<text>{{money}}</text>
					<text class="u-font-20 u-padding-left-10">元</text>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true" @finish="finish"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">请输入支付密码</view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	export default {
		props: ['money'],
		data() {
			return {
				password: '',
				isshow: false
			}
		},
		methods: {
			onChange(val) {
				if (this.password.length < 6) this.password += val
				if (this.password.length >= 6) this.pay()
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			finish() {
				console.log(11111)
			},
			pay() {
				this.$emit('pay', parseInt(this.password))
				this.password = ''
			},
			show() {
				this.isshow = true
			},
			hide() {
				this.isshow = false
			}
		}
	}
</script>

<style>

</style>
